<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-购物车</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <#--<link rel="stylesheet" type="text/css" href="css/carts.css">-->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <#--<script type="text/javascript" src="js/payfor.js"></script>-->
    <#--<script type="text/javascript" src="js/carts.js"></script>-->
</head>
<body>

<script>

    $(document).ready(function () {
        queryShopCartByUserId(1, 4);
    })
    function queryShopCartByUserId(page,size) {
        $.ajax({
            url: "queryShopCartByUserId",
            data: {page:page,size:size},
            dataType: "json",
            type: "GET",
            success: function (msg) {
                var str = '<ul class="cart_list_td clearfix" >';
                for (var i = 0; i < msg.data.length; i++) {
                   str = str + '<li>' +
                        '<li class="col01"><input type="checkbox" class="j-check" checked="checked"></li>' +
                        '<li class="col02"><img src="images/'+ msg.data[i].cart_gpicture +'"></li>' +
                    '<li class="col03">'+ msg.data[i].cart_gname +'<br></li>' +
                    '<li class="col04">'+ msg.data[i].cart_gunit +'</li>' +
                    '<li class="col05" class="price-g">¥'+ msg.data[i].cart_gprice +'</li>' +
                    '<li class="col06">' +
                        '<div class="num_add">' +
                            '<a href="javascript:;" class="minus fl" >-</a>' +
                            '<input type="text" class="num_show fl"  value="'+ msg.data[i].goods_number +'" name="qty_item_'+i+'" id="qty_item_'+i+'">' +
                                '<a href="javascript:;" class="add fl" >+</a>' +
                        '</div>' +
                    '</li>' +
                    '<li class="col07"><em id="total_item_'+i+'" class="price-jiner">¥'+ msg.data[i].goods_subtotal +'</em><input type="hidden" name="total_price'+i+'" id="total_price'+i+'" value="" /></li>' +
                    '<li class="col08"><a href="javascript:deletecartbyid('+msg.data[i].cart_id+')">删除</a></li>';
                }
                str = str + '</ul>';
                $("#carts").html(str);

                str2 = '<a href="javascript:queryShopCartByUserId(' + (page - 1) + ', '+size+')">' +
                    '上一页</a>' +
                    ' <span  id="qscbui"></span >' +
                    '<a href="javascript:queryShopCartByUserId(' + (page + 1) + ', '+size+')">下一页</a>';
                $("#index").html(str2);
                var myindex = msg.maxPage;
                if (myindex != '') {
                    myindex = parseInt(myindex);
                    var str3 = '';
                    for (var i = 0; i < myindex; i++) {
                        str3 = str3 + '<a href="javascript:queryShopCartByUserId(' + (i + 1) + ', '+size+')" class="active">' + (i + 1) + '</a>';
                    }
                    $("#qscbui").html(str3);
                }
                var count = msg.count;
                var str5 = '<div class="total_count">全部商品<em>'+count+'</em>件</div>';
                $("#mygcount").html(str5);
                var allcount = msg.allcount;
                var sumtotal = msg.sumtotal;
                var str4 = '<ul class="settlements">'+
                    '<li class="col01"><input type="checkbox" class="allCheck" checked="checked">'+
                    '<label for="all"></label></li>'+
                    '<li class="col02">全选</li>'+
                    '<li class="col03">合计(不含运费)：<span>¥</span><em class="priceAll">'+sumtotal+'</em><br>共计件商品<b class="spnum">'+allcount+'</b></li>'+
                    '<li class="col04"><a href="javascript:buy('+count+','+msg.data[i].cart_id+','+sumtotal+')">去结算</a></li>'+
                    '</ul>';
                $("#mytotal").html(str4);

                // 1、全选  全不选
                $('.allCheck').change(function() {
                    if ($(this).prop('checked')) {
                        $('.j-check,.allCheck').prop('checked', true);
                        $('.spnum').text(allcount);
                        $('.priceAll').text(sumtotal);
                    } else {
                        $('.j-check,.allCheck').prop('checked', false);
                        $('.spnum').text(0);
                        $('.priceAll').text(0.00);
                    }

                });

                // 2、下面的小复选框
                $('.j-check').change(function() {
                    // 小复选框全部选中，则全选选中
                    if ($('.j-check:checked').length == $('.j-check').length) {
                        $('.allCheck').prop('checked', true);
                    } else {
                        $('.allCheck').prop('checked', false);
                    }
                    // 商品数量
                    getSum();
                });
            }
        })


    }

</script>

<script>
    function gotopay(pid) {
        location.href = "addShopCart?id=" + pid;
    }

    function deletecartbyid(cid) {
        location.href = "deleteShorCartByCartId?cart_id="+cid;
    }

    function buy(time,code,price) {
        location.href="doPay?price=" + price + '&code=' + code + '&time=' + time
    }
</script>


<div class="header_con">
    <div class="header">
        <div class="welcome fl">欢迎来到天天生鲜!</div>
        <div class="fr">
            <div class="login_info fl">
                欢迎您：<em>张 山</em>
            </div>
            <div class="login_btn fl">
                <a href="login.html">登录</a>
                <span>|</span>
                <a href="register.html">注册</a>
            </div>
            <div class="user_link fl">
                <span>|</span>
                <a href="user_center_info.html">用户中心</a>
                <span>|</span>
                <a href="cart.html">我的购物车</a>
                <span>|</span>
                <a href="user_center_order.html">我的订单</a>
            </div>
        </div>
    </div>
</div>

<div class="search_bar clearfix">
    <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<#--<div class="total_count">全部商品<em>${Session.cartcount}</em>件</div>-->
<div id="mygcount"></div>
<ul class="cart_list_th clearfix">
    <li class="col01">商品名称</li>
    <li class="col02">商品单位</li>
    <li class="col03">商品价格</li>
    <li class="col04">数量</li>
    <li class="col05">小计</li>
    <li class="col06">操作</li>
</ul>
<div id="carts"></div>


<#--<ul class="cart_list_td clearfix">
    <li class="col01"><input type="checkbox" name="" checked></li>
    <li class="col02"><img src="images/goods/goods012.jpg"></li>
    <li class="col03">奇异果<br><em>25.80元/500g</em></li>
    <li class="col04">500g</li>
    <li class="col05">25.80元</li>
    <li class="col06">
        <div class="num_add">
            <a href="javascript:;" class="add fl">+</a>
            <input type="text" class="num_show fl" value="1">
            <a href="javascript:;" class="minus fl">-</a>
        </div>
    </li>
    <li class="col07">25.80元</li>
    <li class="col08"><a href="javascript:;">删除</a></li>
</ul>-->




<#--<ul class="settlements">
    <li class="col01"><input type="checkbox" class="allCheck" checked="checked">
        <label for="all"></label></li>
    <li class="col02">全选</li>&lt;#&ndash;${Session.alltotal.cart_gtotal}&ndash;&gt;&lt;#&ndash;<b>${Session.cartcount}</b>&ndash;&gt;
    <li class="col03">合计(不含运费)：<span>¥</span><em class="priceAll">${Session.alltotal.cart_gtotal}</em><br>共计件商品<b class="spnum">${Session.allcount.cart_number}</b></li>
    <li class="col04"><a href="place_order.html">去结算</a></li>
</ul>-->
<div id="mytotal"></div>
<!-- 分页 -->
<div class="pagenation" id="index"></div>

<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
</div>
<script>
    $(function() {
        // 1、全选  全不选
        $('.allCheck').change(function() {
            if ($(this).prop('checked')) {
                $('.j-check,.allCheck').prop('checked', true);
                $('.spnum').text(${Session.allcount.cart_number});
                $('.priceAll').text(${Session.alltotal.cart_gtotal});
            } else {
                $('.j-check,.allCheck').prop('checked', false);
                $('.spnum').text(0);
                $('.priceAll').text(0.00);
            }

        });
        // 2、下面的小复选框
        $('.j-check').change(function() {
            // 小复选框全部选中，则全选选中
            if ($('.j-check:checked').length == $('.j-check').length) {
                $('.allCheck').prop('checked', true);
            } else {
                $('.allCheck').prop('checked', false);
            }
            // 商品数量
            getSum();
        });
        // 3、商品数量增加
        $('.add fl').click(function() {
            var n = $(this).siblings('.num_show').val();
            n++;
            $(this).siblings('.num_show').val(n);
            // 商品金额 跟随 商品数量变化  金额 = 商品数量 * 商品单价
            var p = $(this).parent('.num_add').siblings('.price-g').text();
            p = p.substr(1);
            $(this).parent('.num_add').siblings('.price-jiner').text('¥' + (n * p).toFixed(2));
            getSum();

        });
        // 4、商品数量减少
        $('.minus').click(function() {
            var n = $(this).siblings('.num_show').val();
            n--;
            if (n <= 1) {
                n = 1;
            }
            $(this).siblings('.num_show').val(n);
            // 商品金额 跟随 商品数量变化
            var p = $(this).parent('.num_add').siblings('.price-g').text();
            p = p.substr(1);
            $(this).parent('.num_add').siblings('.price-jiner').text('¥' + (n * p).toFixed(2));
        });
        // 5、修改数量
        $('.num_show').change(function() {
            var n = $(this).val();
            var p = $(this).parent('.num_add').siblings('.price-g').text().substr(1);
            $(this).parent('.num_add').siblings('.price-jiner').text('¥' + (n * p).toFixed(2));
            getSum();
        });
        // 商品价格
        getSum();

        function getSum() {
            // 总数量
            var num = 0;
            // 总价
            var money = 0;
            // 遍历
            $('.num_show').each(function(i, ele) {
                if ($(this).parent('.num_add').find('.j-check').prop('checked')) {
                    num += parseInt($(ele).val());
                    $('.spnum').text(num);
                }
            });
            $('.price-jiner').each(function(i, ele) {
                if ($(this).find('.j-check').prop('checked')) {
                    money += parseFloat($(ele).text().substr(1));
                    $('.priceAll').text(money);
                }
            })

        }
    })
</script>
</body>
</html>